<template>
  <el-select v-model="name"
             v-bind="$attrs"
             filterable
             style="width: 100%"
             allow-create
             @change="selectItem"
             default-first-option
             placeholder="请选择发货方">
    <el-option v-for="item in options"
               :key="item.customerId"
               :label="item.name"
               :value="item.customerId">
    </el-option>
  </el-select>
</template>

<script>
import { customer } from "@/api/index";
export default {
  name: "SelectCustomer",
  props: {
    value: [String, Number]
  },
  computed: {
    defaultValue () {
      this.name = this.value;
      return this.value;
    }
  },
  watch: {
    defaultValue: {
      handler (val) {
        this.name = val;
      }
    }
  },
  data () {
    return {
      name: "",
      show: false,
      options: [],
      pagination: {
        size: 9999999,
        page: 1,
        customerTypes: [0, 2],
        sort: [{ name: "createAt", asc: false }]
      }
    };
  },
  created () {
    this.getList();
  },
  methods: {
    // 选择客户
    selectItem (item) {
      // this.name = item.name
      this.$emit("input", item);
      this.show = false;
    },
    async getList () {
      this.pagination.customerName = this.name;
      let { code, data } = await customer.search(this.pagination);
      if (code !== 0 || !data) return;
      this.options = data.records;
    },
    handleInput (value) {
      this.pagination.customerName = value;
      this.getList();
      if (this.options.length > 0) this.show = true;
      this.$emit("input", value);
    }
  }
};
</script>

<style lang="scss">
.customerList {
  position: absolute;
  z-index: 2;
  background: var(--prev-bg-white);
  width: 100%;
  border: 1px solid var(--prev-border-color-grey);
  border-radius: 3px;
  ul {
    margin: 0;
    padding: 0;
    li {
      padding: 10px;
      list-style: none;
      &:hover {
        background: var(--prev-bg-grey);
        cursor: pointer;
      }
    }
  }
}
</style>
